<template>
  <div>
      <el-container style="height: 700px; border: 1px solid #eee">
      <el-header
        style="
          font-size: 40px;
          color: #409eff;
          background-color: rgb(238, 241, 246);
        "
        >---北斗定点智能垃圾分拣机器人产品实时追踪平台---
      </el-header>

      <el-container>
        <el-aside width="100px">
          <i class="el-icon-camera-solid"></i>
        </el-aside>

<el-container>
      <el-main>
        <el-container style="height: 200px; border: 1px solid #eee; color:#F56C6C" >---  请确认您的图传地址:  ---

        </el-container>
        <el-input  type="text" id="mjpg_url" v-model="mjpgUrl" value="http://192.168.137.4:8080/stream"></el-input>
        <br>
        <span>
        <el-button type="primary" @click="setMjpgUrl">设置</el-button>
        <el-button type="primary" @click="takePhoto">拍照</el-button>
        </span>
        <div id="message">{{message}}</div>
      
      <img id="imageSrc" :src="mjpgUrl" alt="No Image available" style="width: 640px; height: auto;">
      <img id="capturedImage" :src="capturedImageUrl" alt="Captured Image" v-if="capturedImageUrl" style="max-width: 640px; height: auto;">
      </el-main>

      <el-footer
            style="
              font-size: 20px;
              color: #F56C6C;
              background-color: rgb(238, 241, 246);
            "
            >---摄像头实时显示---
          </el-footer>
      </el-container>
      </el-container>
      </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mjpgUrl: 'http://192.168.137.4:8080/stream',
      message: '',
      capturedImageUrl: ''
    };
  },
  methods: {
    setMjpgUrl() {
      this.$el.querySelector('#imageSrc').src = this.mjpgUrl;
    },
    takePhoto() {
      const baseURL = this.mjpgUrl.split('/stream')[0];
      const photoURL = `${baseURL}/take_photo`;
      fetch(photoURL)
     .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
     .then(data => {
        this.message = data.message;
        this.capturedImageUrl = data.image_url;
      })
     .catch(error => {
        console.error("Error taking photo:", error);
        this.message = "拍照失败，请重试。";
      });
    }
  }
};
</script>

<style scoped>
.input_underline {
  border-bottom: 1px solid #dbdbdb;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  width: 200px;
  color: #f6931f;
  font-weight: bold;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

</style>